<template>
  <div>
    <div v-show="searchStatus" class="box-shadow pad10 mgb10">
      <el-form :model="queryParams" ref="queryRef" :inline="true" class="fnmb">
        <div class="flex jbetween">
          <div>
            <MyFormItem v-model="queryParams" :FormList="FormList"></MyFormItem>
          </div>
          <div class="flex jend acenter fnw">
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <MyTable
      :tableList="tableList"
      :total="Total"
      :columns="columns"
      v-model:page="page"
      v-model:searchStatus="searchStatus"
      :btnList="$checkBtn(['SixData:check', 'SixData:delete'])"
      @getList="getList"
      @edit="handleEdit"
      @delete="handleDelete"
      @check="handleCheck"
    >
    </MyTable>
    <MyDialog v-model:show="show" :title="title" :showFooter="false">
      <SixDetail v-model="formData" />
    </MyDialog>
  </div>
</template>

<script setup name="SixData">
import { ref, getCurrentInstance, onMounted } from 'vue';
import SixDetail from '@/views/sixManage/SixData/sixDetail';
import {
  GetSixSaleDataList_Page,
  GetSixSaleDataDetail,
  DelSixSaleData
} from '@/api/sixManage/SixData.js';
import { FormList } from './common';
const { proxy } = getCurrentInstance();
const tableList = ref([]);
const Total = ref(0);
const columns = ref([
  { label: '序号' },
  { label: '编号', prop: 'Number' },
  { label: '区域名称', prop: 'AreaName' },
  { label: '场地名称', prop: 'PlaceName' },
  { label: '6s问题类型', prop: 'TypeName' },
  { label: '问题描述', prop: 'Description' },
  { label: '状态', prop: 'StateName', tag: true },
  { label: '创建时间', prop: 'CreateTime' },
  { label: '创建人', prop: 'CreateUser', user: true },
  { label: '最后一次处理方式', prop: 'Last_ProcessMode' },
  { label: '最后一次驳回原因', prop: 'Last_BackReason' },
  { label: '操作', width: 160 }
]);

proxy.$formatKey(columns.value);
const page = ref({
  PageIndex: 1,
  PageSize: 10
});
const searchStatus = ref(true);
const queryParams = ref({
  Code: '',
  Name: '',
  NoPage: '' //如果传"true"，则返回全部数据不分页
});
const queryRef = ref();
const show = ref(false);
const title = ref();
const formRef = ref();
const rules = ref({
  Code: [{ required: true, message: '请输入', trigger: 'blur' }],
  Name: [{ required: true, message: '请输入', trigger: 'blur' }],
  Principal: [{ required: true, message: '请选择', trigger: 'change' }]
});
const formData = ref({});
const status = ref({
  1: '待处理',
  2: '待确认',
  3: '已完成'
});
const types = ref({
  1: 'danger',
  2: 'warning',
  3: 'success'
});
onMounted(() => {
  getList();
});

async function handleCheck(row) {
  try {
    let res = await GetSixSaleDataDetail({ ID: row.ID });
    formData.value = res.data;
    if (!formData.value?.Place) {
      formData.value.Place = {};
    }
    if (!formData.value?.Process) {
      formData.value.Process = {};
    }
    title.value = '问题详情';
    show.value = true;
  } catch (error) {
    console.log(error);
  }
}

async function getList() {
  try {
    let query = {
      ...queryParams.value,
      ...page.value
    };
    let res = await GetSixSaleDataList_Page(query);
    res.data.List?.forEach(item => {
      item.StateName = filterState(item);
    });
    tableList.value = res.data.List;
    Total.value = res.data.Total;
  } catch (error) {
    console.log(error);
  }
}
function filterState(item) {
  return [
    {
      type: types.value[item.State],
      color: '',
      effect: 'dark',
      size: '',
      name: status.value[item.State]
    }
  ];
}
function handleEdit(row) {
  title.value = '修改';
  show.value = true;
}
async function handleDelete(row) {
  try {
    await DelSixSaleData({ ID: row.ID });
    proxy.$modal.msgSuccess('删除成功');
    getList();
  } catch (error) {
    console.log(error);
  }
}
function handleAdd() {
  show.value = true;
  title.value = '添加区域';
}
function handleQuery() {
  page.value.PageIndex = 1;
  getList();
}
function resetQuery() {
  queryParams.value = {
    Code: '',
    Name: '',
    NoPage: ''
  };
  handleQuery();
}
</script>

<style lang="scss" scoped></style>
